<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<title>Login</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
	body { height: 100%; padding: 0; margin: 0; font-family: 微软雅黑, Arail; font-size: 13px;}
	body, html {height: 100%;}
	body, input { font-family: 微软雅黑, Arail; font-size: 13px; }
	#outer {height: 100%; overflow: hidden; position: relative; width: 100%;}
	#outer[id] {display: table;position: static;}
	#middle {position: absolute;top: 50%;left: 0;}
	#middle[id] {display: table-cell;vertical-align: middle;position: static;}
	#inner {position: relative;top: -50%;margin: 0 auto;}
	#content {width: 500px;height: 300px;border: 1px solid;background: #EEE;margin: 0 auto;filter:alpha(opacity=70); -moz-opacity:0.7; opacity:0.7;-moz-border-radius: 3px;/* Gecko browsers */ -webkit-border-radius: 3px;   /* Webkit browsers */ border-radius:3px;/* W3C syntax */}
	#top {background:url(images/login_logo.png) repeat-x; filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')"; -moz-background-size:100% 100%; background-size:100% 100%; display:table; text-align:center;height: 80px;width: 100%;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #ccc;}
    #title { vertical-align:middle; display:table-cell; width:auto; font-size: 23px; padding-top: 15px;}
	#bottom {margin-top: 10px;}
	#msg {height: 16px;width: 100%;margin-bottom: 10px; color:red;}
    a img {border: none;}
    input {background: #FFFFFF; border: 0; filter:alpha(opacity=100); -moz-opacity:1; opacity:1;}
    .input_border {height: 23px;width: 180px;}
    .bg{background:url(images/bg.jpg); filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')"; -moz-background-size:100% 100%; background-size:100% 100%; }
</style>

<script type="text/javascript">
    if(window.parent.length > 0){
        top.window.location = "/login.html";
    }
    $(function() {
        $('#username').focus();
        $('#loginFrom').submit(function() {
            if(!$('#username').val().length) {
                $('#msg').text('请输入用户名');
                $('#username').focus();
                return;
            }
            if(!$('#password').val().length) {
                $('#msg').text('请输入密码');
                $('#password').focus();
                return;
            }
            var postData = $("#loginFrom").serialize();//序列化表单，后台可正常通过post方法获取数据
            $.ajax({
                type: "post",
                url: "v1/api0/security/login",
                data: postData,
                success: function(data) {
                    if (data.code == 200) {
                        window.location.href = '/home.html';
                    } else {
                        $('#msg').text(data.msg);
                    }
                }
            });
        });

        $('#submit').click(function() {
            $('#loginFrom').submit();
        });
    });
</script>
</head>

<body>
<div id="outer">  
    <div id="middle" class="bg">
        <div id="inner">  
             <div id="content">
				<div id="top" >
                    <div id="title">选牛网后台管理系统</div>
				</div>
				<div id="bottom" align="center">
					<div id="msg"></div>
					<form id=loginFrom>
						用户名：<input type=text id=username name=username class="input_border" maxlength=16/> <p/>
						密<span style="visibility:hidden">码</span>码：<input type=password id=password name=password class="input_border"/></p>
						验证码：<input type=text id=verifyCode name=verifyCode maxlength=4 style="width:115px;height:23px;"/>&nbsp;<a href="" onClick="document.getElementById('CheckPic').src=''"><img id="CheckPic" src="" style="vertical-align:middle;width:60px;height:25px;border:0;"/></a><br/><br/>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input id="submit" type="button"  style="height:25px;width:80px;" value="登 录" /> &nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" name="reset" value="重 置" style="height:25px;width:80px;" onclick="document.getElementById('username').focus();"/>
					</form>
				</div>
			 </div>  
        </div>  
    </div>  
</div>  
</body>  
</html>
